<template>
  <div class="user-role">
    <div class="action-bar">
      <h3>角色管理</h3>
      <el-button type="primary" @click="showAddRoleDialog">
        <el-icon><Plus /></el-icon>
        添加角色
      </el-button>
    </div>
    
    <el-table :data="roles" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="角色名称" width="150" />
      <el-table-column prop="code" label="角色代码" width="150" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="permissions" label="权限" width="200">
        <template #default="{ row }">
          <el-tag v-for="perm in row.permissions" :key="perm" size="small" style="margin-right: 4px;">
            {{ perm }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="userCount" label="用户数" width="100" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
            {{ row.status === 'active' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="editRole(row)">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button type="text" size="small" @click="deleteRole(row)">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'UserRole',
  setup() {
    const roles = ref([
      {
        id: 1,
        name: '超级管理员',
        code: 'super_admin',
        description: '拥有系统所有权限',
        permissions: ['用户管理', '角色管理', '系统配置', '数据管理'],
        userCount: 1,
        status: 'active'
      },
      {
        id: 2,
        name: '管理员',
        code: 'admin',
        description: '拥有大部分管理权限',
        permissions: ['用户管理', '数据管理', '报告管理'],
        userCount: 3,
        status: 'active'
      },
      {
        id: 3,
        name: '普通用户',
        code: 'user',
        description: '基础功能使用权限',
        permissions: ['数据查看', '报告查看'],
        userCount: 1250,
        status: 'active'
      }
    ])
    
    const showAddRoleDialog = () => {
      ElMessage.info('添加角色功能开发中...')
    }
    
    const editRole = (role) => {
      ElMessage.info('编辑角色功能开发中...')
    }
    
    const deleteRole = (role) => {
      ElMessageBox.confirm(
        `确定要删除角色 "${role.name}" 吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        const index = roles.value.findIndex(r => r.id === role.id)
        if (index !== -1) {
          roles.value.splice(index, 1)
          ElMessage.success('角色删除成功')
        }
      })
    }
    
    return {
      roles,
      showAddRoleDialog,
      editRole,
      deleteRole
    }
  }
}
</script>

<style scoped>
.user-role {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.action-bar h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}
</style>
